<script>
import { frame, trend } from 'services/x-start/mgr/spread'
import rtspCanvas from './components/rtspCanvas'
import echarts from 'echarts'
import Echarts from './components/Echarts'
import qs from 'qs'

export default {
  components: { rtspCanvas, Echarts },
  data() {
    return {
      frameList: [],
      trendList: [],
    }
  },
  created() {
    this.getFrame()
    this.getTrend()
  },
  methods: {
    getFrame() {
      frame().then((res) => {
        this.frameList = res.data
      })
    },
    getTrend() {
      trend().then((res) => {
        this.trendList = res.data
      })
    },
  },
}
</script>

<template lang="pug">
.background
  .datas
    .name 智慧体育场馆健身客流统计分析
    .frame
      .title 实时监控画面
      .list-box
        .item(v-for='item in frameList', :key='item.name')
          rtspCanvas(:item='item')
    .trend
      .title 趋势分析
      .list-box
        .item(v-for='(item, index) in trendList', :key='index')
          .top
            .name {{ item.jsonObject.name }}各时段运动人次趋势图
            .nums-box
              .nums
                .label 总现场人数：
                .num {{ Math.abs(item.jsonObject.now) }}个
              .nums
                .label 总出场人数：
                .num {{ item.jsonObject.ent }}个
              .nums
                .label 总进场人数：
                .num {{ item.jsonObject.ext }}个
          Echarts(:data='item', height='20vh')
</template>

<style lang="stylus" scoped>
.background
  background-image url('../../../assets/img/bg.png')
  background-size cover
  background-repeat no-repeat
  background-position center
.datas
  height 100vh
  margin auto 20px
  background-image url('../../../assets/img/bg.png')
  background-size contain
  background-repeat no-repeat
  background-position center
  @media (max-width 1850px)
    background-size cover
  >.name
    color #fff
    font-size 32px
    text-align center
    font-weight bold
    height 70px
    line-height @height
  .title
    background-image url('../../../assets/img/icon.png')
    line-height 50px
    background-repeat no-repeat
    background-position left
    color #fff
    font-size 20px
    padding-left 20px
    margin 20px 0
  .frame
    .list-box
      height 45vh
      border-radius 5px
      padding 10px 10px 0
      border 1px solid #F18903
      display flex
      box-sizing border-box
      flex-wrap wrap
      >.item
        width 19.2%
        margin-right 1%
        height 48%
        margin-bottom 10px
        box-sizing border-box
        border 1px solid #F18903
        &:nth-child(5n)
          margin-right 0
  .trend
    .list-box
      height 27vh
      box-sizing border-box
      display flex
      >.item
        width 24.5%
        padding 10px
        border-radius 5px
        box-sizing border-box
        border 1px solid #F18903
        margin-right 0.5%
        &:nth-child(4n)
          margin-right 0
        .top
          color #fff
          .nums-box
            margin 10px 0
            display flex
            font-size 12px
            justify-content space-between
            .nums
              display flex
              &:nth-child(1)
                .num
                  color #FF7010
</style>
